const MockUrl = "./data.json"; // 定义请求地址
/**
 * @return {Array}  请求到的数组
 */
async function fetchCodeData() {
  // TODO：待补充代码 目标 1
  const { data: data } = await axios.get(MockUrl);
  return data;
}

// 根据数据绘制图表
function setChart(chart, data) {
  chart.setOption({
    title: {
      text: "代码量统计",
      left: "center",
      top: 20,
    },

    series: [
      {
        name: "Code Counter",
        type: "treemap",
        data,
        itemStyle: {
          gapWidth: 5,
        },
        // TODO：待补充代码 目标 3
        visibleMin:6400,
        label: {
          // TODO：待补充代码 目标 3
          formatter: "{b}\n{c}行"
        },
        levels: [
          {
            color: ["#FCB944", "#80B7C2", "#C48483", "#F0663B", "#75D180"],
          },
          {
            colorSaturation: [0.35, 0.5],
          },
        ],
      },
    ],
  });
}

window.onload = async () => {
  const dom = document.querySelector("#canvasContainer");
  const chart = echarts.init(dom);

  // 获取原始数据
  const rawData = await fetchCodeData();

  // 处理后的数据
  let processedData = [];
  // TODO：待补充代码 目标 2
  const reg0 = /^(\w+)$/;
  const reg1 = /^(\w+)\/(\w+[-]{0,1}\w+[-]{0,1}\w+)$/;
  const reg2 = /^(\w+)\/(\w+[-]{0,1}\w+[-]{0,1}\w+)\/([\(]{0,1}\w+[\)]{0,1})$/;
  const reg3 = /^(\w+)\/(\w+)\/(\w+)\/([\(]{0,1}\w+[\)]{0,1})$/;
  const reg4 = /^(\w+)\/(\w+)\/(\w+)\/(\w+)\/([\(]{0,1}\w+[\)]{0,1})$/;
  rawData.forEach((item) => {
    if (reg0.test(item[0])) {
      let matches = reg0.exec(item[0]);
      processedData.push({ name: matches[1], value: item[1], children: [] });
    } else if (reg1.test(item[0])) {
      let matches = reg1.exec(item[0]);
      processedData
        .find((item) => item.name == matches[1])
        .children.push({ name: matches[2], value: item[1], children: [] });
    } else if (reg2.test(item[0])) {
      let matches = reg2.exec(item[0]);
      processedData
        .find((item) => item.name == matches[1])
        .children.find((el) => el.name == matches[2])
        .children.push({ name: matches[3], value: item[1], children: [] });
    } else if (reg3.test(item[0])) {
      let matches = reg3.exec(item[0]);
      processedData
        .find((item) => item.name == matches[1])
        .children.find((el) => el.name == matches[2])
        .children.find((e) => e.name == matches[3])
        .children.push({ name: matches[4], value: item[1], children: [] });
    } else if (reg4.test(item[0])) {
      let matches = reg4.exec(item[0]);
      processedData
        .find((item) => item.name == matches[1])
        .children.find((el) => el.name == matches[2])
        .children.find((e) => e.name == matches[3])
        .children.find((it) => it.name == matches[4])
        .children.push({ name: matches[5], value: item[1], children: [] });
    }
  });
  processedData = JSON.stringify(processedData);
  const str = `,"children":[]`;
  processedData = processedData.replaceAll(str,"");
  processedData = JSON.parse(processedData);
  // TODO：END
  // 绘制图表
  setChart(chart, processedData);
};
